<!--
 * @Author: chengxinwei 499449221@qq.com
 * @Date: 2024-10-26 09:48:19
 * @LastEditors: chengxinwei 499449221@qq.com
 * @LastEditTime: 2024-11-05 15:57:42
 * @FilePath: /steel-arch-ui/src/components/RollList/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div style="padding: 0px 5px 5px 5px">
    <div class="backround">
      <vue-seamless-scroll
        :data="dataList"
        :class-option="optionHover"
        class="seamless-warp"
        :style="tableStyle"
      >
        <slot></slot>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  components: {
    vueSeamlessScroll,
  },
  props: {
    dataList: {
      type: Array,
      default: () => [],
    },
    height: {
      type: Number,
      default: 200,
    },
  },
  data() {
    return {
      step: 0.5,
      stop: false,
    };
  },
  computed: {
    optionHover() {
      let step = this.step;
      if (this.stop) {
        step = 0;
      }
      return {
        step: step, // 数值越大速度滚动越快
        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
    tableStyle() {
      let style = { height: `${this.height}px` };

      return style;
    },
  },
  methods: {
    updateStatus(stop) {
      this.stop = stop;
    },
  },
};
</script>
<style scoped>
.backround {
  width: 100%;
}
.seamless-warp {
  overflow: hidden;
}
</style>
